<template>
  <div class="game-detail" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
    <div
      :class="['game-swipe', !moveState.isTouch ? ' transition' : '']"
      :style="{ height: `${moveState.b_offsetY}px` }"
    >
      <img :src="currentImage" alt="" class="bg-filter" />
      <fs-swipe @change="handleImageChange" ref="swipeRef">
        <fs-swipe-item
          v-for="(item, index) in currentGame?.images"
          :key="index"
          :width="tranState.tranWidth"
          :is-tran="true"
          :is-scale="true"
        >
          <img :src="item" />
        </fs-swipe-item>
      </fs-swipe>
    </div>
    <div
      :class="['game-content', !moveState.isTouch ? ' transition' : '']"
      :style="{ transform: `translateY(${moveState.c_offsetY}px)` }"
    >
      <div class="game-content_title game-content_container">
        <h3>名称</h3>
        <div class="time">发布日期：{{ currentGame?.time }}</div>
        <div class="tags">
          <div class="tag-item" v-for="(item, index) in currentGame?.tags" :key="index">{{ item }}</div>
        </div>
      </div>
      <div class="game-content_introduce game-content_container">
        <h3>介绍</h3>
        <p>{{ currentGame?.introduce }}</p>
      </div>
      <div class="game-content_feel game-content_container">
        <h3>感悟</h3>
        <p>
          {{ currentGame?.think }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, nextTick, reactive, ref } from "vue";
import FsSwipe from "@/components/FsSwipe/FsSwipe.vue";
import FsSwipeItem from "@/components/FsSwipe/FsSwipeItem.vue";
import { GAME_LIST } from "@/config/config";
import type { IgameItem } from "@/types/gameType";
import { useRoute } from "vue-router";

const $route = useRoute();
const swipeRef = ref<any>();
const currentGame = ref<IgameItem>();

const currentImage = ref(currentGame.value?.images[0]);
const w_clientY = computed(() => document.documentElement.clientHeight);
const tranState = reactive({
  tranWidth: "50vw",
});
const moveState = reactive({
  startY: 0,
  b_offsetY: w_clientY.value / 2,
  c_offsetY: 0,
  c_endY: 0,
  b_endY: 0,
  isTouch: false,
});

currentGame.value = GAME_LIST.find((item) => item.id == Number($route.params.id));

const handleImageChange = (index: number) => {
  currentImage.value = currentGame.value?.images[index];
};

const handleTouchStart = (e: TouchEvent) => {
  moveState.startY = e.touches[0].clientY;
  moveState.isTouch = true;
};
const handleTouchMove = (e: TouchEvent) => {
  const { clientY } = e.touches[0];
  const moveY = Math.floor(clientY - moveState.startY);
  moveState.c_offsetY = moveState.c_endY + moveY;
  moveState.b_offsetY = moveState.b_endY != 0 ? moveState.b_endY + moveY : w_clientY.value / 2 + moveY;
};

const handleTouchEnd = (e: TouchEvent) => {
  moveState.isTouch = false;
  breakPoint();
  moveState.c_endY = moveState.c_offsetY;
  moveState.b_endY = moveState.b_offsetY;
};

const switchBanner = async (flag: boolean) => {
  tranState.tranWidth = flag ? "100vw" : "50vw";
  await nextTick();
  swipeRef.value.initSwipe();
};

const breakPoint = () => {
  const breakHeight = w_clientY.value / 4,
    currentOffset = moveState.c_offsetY;
  if (currentOffset < 0 && Math.abs(currentOffset) > breakHeight) {
    // 上拉文本内容覆盖屏幕
    moveState.c_offsetY = -w_clientY.value / 2;
    switchBanner(false);
  } else if (currentOffset < 0 && Math.abs(currentOffset) < breakHeight) {
    // 中间回弹
    moveState.c_offsetY = 0;
    moveState.b_offsetY = w_clientY.value / 2;
    switchBanner(false);
  } else if (currentOffset > 0 && currentOffset > breakHeight) {
    // 下拉展示轮播
    moveState.c_offsetY = w_clientY.value / 2;
    moveState.b_offsetY = w_clientY.value;
    switchBanner(true);
  } else {
    // 中间回弹
    moveState.c_offsetY = 0;
    moveState.b_offsetY = w_clientY.value / 2;
    switchBanner(false);
  }
};
</script>

<style scoped lang="scss">
.game-detail {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--box-color);
  z-index: 1000;
  .transition {
    transition: all 0.3s ease-in-out;
  }
  .game-swipe {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 16px 0;
    box-sizing: border-box;
    .bg-filter {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      filter: blur(5px);
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      min-height: 30vh;
      padding: 5px;
      box-sizing: border-box;
    }
  }
  .game-content {
    position: relative;
    width: 100%;
    margin-top: 50vh;
    width: 100%;
    height: 100%;
    font-size: 16px;
    background-color: var(--box-color);
    h3 {
      margin: 0;
      font-weight: normal;
    }
    p {
      color: var(--font-light-color);
      text-indent: 1em;
      line-height: 1.5em;
      margin: 5px;
    }
    &_container {
      padding: 10px;
      border-bottom: 6px solid #eee;
    }
    &_title {
      .time {
        color: var(--font-light-color);
        font-size: 14px;
        margin: 10px 0;
      }
      .tags {
        display: flex;
        align-items: center;
        gap: 5px;
        .tag-item {
          font-size: 12px;
          border: 1px solid var(--font-active-color);
          color: var(--font-active-color);
          border-radius: 5px;
          padding: 3px;
        }
      }
    }
    &_introduce {
      padding: 10px;
    }
  }
}
</style>
